!function ($) {
    var FileTree = function (element, options) {
        this.target_el = "#" + element.id;
        if (options) _.extend(this, options);
    };

    FileTree.prototype = {
        constructor:FileTree,

        dir:function (url) {
            this.breadcrumbs(url);

            $.ajax({
                url:this.service,
                dataType: 'json',
                data: {
                    "filepath": url
                },
                context: this,
                success:function (json) {
                    var dirs = [];
                    dirs.push('<li class="nav-header">Directories</li>');
                    _.each(json.directories, function (value) {
                        dirs.push('<li id="' + value.uri + '" class="filetree-directory">' + value.label + '</li>');
                    });

                    var files = [];
                    files.push('<li class="nav-header">Files</li>');
                    _.each(json.files, function (value) {
                        files.push('<li><a href="#data:' + value.uri + '">' + value.label + '</a></li>');
                    });

                    var html = "";
                    html += "<ul class='nav nav-list'>";
                    html += dirs.join('');
                    html += "</ul>";
                    html += "<ul class='nav nav-list'>";
                    html += files.join('');
                    html += "</ul>";

                    $(this.target_el).empty();
                    $(this.target_el).append(html);

                    var me = this;
                    $(this.target_el + " .filetree-directory").click(function(ev) {
                        me.dir(ev.target.id);
                    });

                    $(this.target_el).trigger("filetree-loaded")
                },

                error: function(j, s, err) {
                    $(this.target_el).empty();
                    $(this.target_el).append(err);
                }
            });
        },

        breadcrumbs: function(url) {
            if (this.breadcrumb) {
                $(this.breadcrumb).empty();
                var pathelements = url.split("/");
                var cumulativepath = "";
                var lastIdx = pathelements.length - 1;
                _.each(pathelements, function(pe, idx) {
                    cumulativepath += "/" + pe;

                    var pelink = '<a id="a_' + cumulativepath + '" href="#" onclick="return false;">' + pe + '</a>';
                    if (idx == 0) {
                        $(this.breadcrumb).append('<li><span class="divider">/</span>' + pelink + '</li>');
                    } else if (idx < lastIdx) {
                        $(this.breadcrumb).append('<li><span class="divider">/</span>' + pelink + '</li>');
                    } else {
                        $(this.breadcrumb).append('<li class="active"><span class="divider">/</span>' + pe + '</li>');
                    }

                    var me = this;
                    $(this.breadcrumb + " a").click(function(ev) {
                        var path = ev.target.id;
                        if (path) {
                            me.dir(path.substring(3, path.length));
                        }
                    });

                }, this);
            }
        }
    };

    // jQuery Plugin
    $.fn.filetree = function (url, options) {
        return this.each(function () {
            var $this = $(this);
            var ft = $this.data("FileTree");
            if (!ft) $this.data("FileTree", (ft = new FileTree(this, options)));
            ft.dir(url);
        });
    };
}(window.jQuery);
